<template>
	<view>
		<!-- 阶段选择 -->
		<u-subsection 
			mode="subsection" 
			:list="list" 
			:current="0" 
			active-color="#dd6161"
			@change="sectionChange">
		</u-subsection>
		<!-- 选择职业和天赋 -->
		<u-grid :col="2" :border="false"  @click="show = true">
			<u-grid-item>
				<u-avatar src="/static/001.png"></u-avatar>
				<view class="grid-text">战士</view>
			</u-grid-item>
			<u-grid-item>
				<u-avatar src="/static/001.png"></u-avatar>
				<view class="grid-text">防战</view>
			</u-grid-item>
		</u-grid>
		<u-divider>BIS配装</u-divider>
		<u-select v-model="show" mode="mutil-column-auto" :list="occupation" @confirm="confirm"></u-select>
		<!-- 显示数据 -->
		<u-row gutter="16" justify="space-between">
			<u-col span="6">
				<!-- 左侧数据显示 -->
				<view v-for="item in 6">
					<u-avatar src="/static/11.png" mode="square" size="120"></u-avatar>
					<text class="textPrompt">666</text>
				</view>
			</u-col>
			<u-col span="6">
				<!-- 右侧数据显示 -->
				<view v-for="item in 6" style="text-align: right;">
					<text class="textPrompt">666</text>
					<u-avatar src="/static/11.png" mode="square" size="120"></u-avatar>
				</view>
			</u-col>
		</u-row>
		<!-- 下面的数据显示 -->
		<view style="text-align: center;margin-top: 50rpx;">
			<u-avatar src="/static/11.png" mode="square" size="120"  v-for="item in 5"></u-avatar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: 'P1版本'
					}, 
					{
						name: 'P2版本'
					}, 
					{
						name: 'P3版本'
					},
					{
						name: 'P4版本'
					},
					{
						name: 'P5版本'
					}
				],
				current: 0,
				show: false,
				occupation: [
					{
						value: 1,
						label: '中国',
						children: [
							{
								value: 2,
								label: '广东'
							},
							{
								value: 3,
								label: '山东'
							},
						]
					}
				]
			};
		},
		methods:{
			// 监听顶部的选择
			sectionChange(index) {
				console.log(index)
				this.current = index;
			},
			// 监听职业的选择事件
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.grid-text{
		color: #909399;
		font-weight: bold;
	}
	.textPrompt{
		margin-left: 10rpx;
		margin-top: -50rpx;
		color: #2979ff;
	}
</style>
